<template>
	<view>
		<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
		<z-paging-swiper>
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
			<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
			<template #top>
				<custom-nav v-bind="navConfig" :navStyle="{marginBottom: 0}" />
				<z-tabs unit="px" ref="tabs" scroll-count="3" :list="tabList" :current="current" @change="tabsChange"
					:active-style="{color: '#eb2e29'}" :inactive-style="{color: '#5E5E5E'}" active-color="#eb2e29" :bar-width="90"
					bottom-space="0" />
			</template>
			<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
			<swiper v-if="isView" class="swiper" :current="current" @transition="swiperTransition"
				@animationfinish="swiperAnimationfinish">
				<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
					<swiper-list-item ref="listItem" componentCurrent="couponItem" :tabIndex="index" :currentIndex="current" @initData="loadData"></swiper-list-item>
				</swiper-item>
			</swiper>
		</z-paging-swiper>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import SwiperListItem from '@/components/swiper-list-item/swiper-list-item.vue';
	import {
		couponsList
	} from '@/service/index.js'
	import navConfig from './config/navConfig.js'

	export default {
		name: 'coupon',
		components: {
			SwiperListItem
		},
		computed: {
			...mapState({
				token: state => state.login.token,
				userInfo: state => state.login.userInfo
			})
		},
		watch: {
			token() {
				this.isView = true
			},
			visible() {
				this.visible && this.initData()
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.login.userInfo
			}),
		},
		data() {
			return {
				navConfig,
				tabList: ['待使用', '已使用', '已过期'],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				isView: false
			}
		},
		created() {
			console.log('7777')
		},
		mounted() {
			this.initData()
		},
		methods: {
			async initData() {
				console.log(this.token, 'this.token')
				this.isView = true
			},
			// 数据加载
			loadData(params) {
				let data = {
					...params,
					status: this.current
				}
				console.log(params, 'params<<<')
				couponsList(data).then(res => {
					if (res.code == 200) {
						this.$refs.listItem[this.current].getData(res.data.list)
					}
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.current = index;
			},
			// swiper滑动中
			swiperTransition(e) {
				this.$refs.tabs.setDx(e.detail.dx);
			},
			// swiper滑动结束
			swiperAnimationfinish(e) {
				this.current = e.detail.current;
				this.$refs.tabs.unlockDx();
			},
			// 如果要通知当前展示的z-paging刷新，请调用此方法
			reloadCurrentList() {
				this.$refs.listItem[this.current].reload();
			}
		},
		beforeDestroy() {

		}
	}
</script>

<style lang="scss" scoped>
	.swiper {
		height: calc(100% - 51px);
		background: #f3f3f3;
	}
</style>